"use client";

import React, { useState } from "react";
import styles from "./index.less";
import ResizeTable from './components/ResizeTable';
import type { TableColumnsType } from "antd";

interface DataType {
    key: React.Key;
    date: string;
    amount: number;
    type: string;
    note: string;
}

const data: any[] = [
    {
        key: 0,
        date: "2025-02-11",
        amount: 128,
        type: "支出",
        note: "王者荣耀买皮肤",
    },
    {
        key: 1,
        date: "2025-03-11",
        amount: 3000,
        type: "收入",
        note: "发工资",
    },
    {
        key: 2,
        date: "2025-04-11",
        amount: 98,
        type: "支出",
        note: "吃烧烤",
    },
    {
        key: 3,
        date: "2025-05-11",
        amount: 1500,
        type: "支出",
        note: "注册珍爱网",
    },
    {
        key: 4,
        date: "2025-06-11",
        amount: 10,
        type: "收入",
        note: "路上捡钱了",
    },
    {
        key: 5,
        date: "2025-07-11",
        amount: 9.9,
        type: "支出",
        note: "买瑞幸咖啡",
    },
];

const UserDataTable: React.FC<{}> = () => {

    const columns: TableColumnsType<any> = [
        {
            title: "日期",
            dataIndex: "date",
            width: 200,
            fixed: 'left',
        },
        {
            title: "金额",
            dataIndex: "amount",
            width: 200,
            sorter: (a, b) => a.amount - b.amount,
        },
        {
            title: "类型",
            dataIndex: "type",
            width: 200,
        },
        {
            title: "备注",
            dataIndex: "note",
            width: 300,
        },
        {
            title: "金额",
            dataIndex: "amount",
            width: 200,
            sorter: (a, b) => a.amount - b.amount,
        },
        {
            title: "类型",
            dataIndex: "type",
            width: 200,
        },
        {
            title: "备注",
            dataIndex: "note",
            width: 300,
        },
        {
            title: "金额",
            dataIndex: "amount",
            width: 200,
            sorter: (a, b) => a.amount - b.amount,
        },
        {
            title: "类型",
            dataIndex: "type",
            width: 200,
        },
        {
            title: "备注",
            dataIndex: "note",
            width: 300,
        },
        {
            title: "操作",
            key: "action",
            fixed: 'right',
            width: 100,
            render: () => <a>删除</a>,
        },
    ];

    return (
        <div className={styles.container}>
            <p className={styles.title}>可拖动列宽表格</p>
            <ResizeTable
                bordered
                dataSource={data}
                columns={columns}
                scroll={{ x: 'max-content' }}
            />
        </div>
    );
};

export default UserDataTable;
